<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css"/>
		<link rel="stylesheet" type="text/css" href="../css/mui.poppicker.css"/>
		<!--<link rel="stylesheet" type="text/css" href="../css/lcs-pop.css"/>-->
		<link rel="stylesheet" type="text/css" href="css/empcss.css"/>
		<style>
			body{
				background: #fff;
				min-height: 100vh;
			}
			h3{
				font-size: 14px;
				
				color: #333;
				padding: 20px 20px 8px;
				
			}
			
			.p{
				line-height: 0;
				font-size: 0;
				margin-bottom: 10px;
				padding: 0 20px;
			}
			.p span{
				display: inline-block;
				width: 50%;
				font-size: 14px;
				line-height: 28px;
				color: #333;
			}
			
			.salce-tab{
				padding-top: 4px;
			}
			
			.table{
				margin-bottom: 30px;
			}
			
			.financial-tab li:after{
				display: none;
			}
			
			.mui-col-xs-6.active p{
				font-weight: bold;
				color: #333;
			}
			
			.table-border .table-tr,
			.table-border .table-th{
				border: 1px solid rgba(228,228,228,1)
			}
			
			.sw{
				margin-top: 20px;
			}
			
				.table-th .table-td{
					background: rgba(51,113,213,1);
					color: #fff;
				}
			
			.mui-bar-nav~.mui-content {
			    padding-top: 0;
			}
			.mui-content{
				height: 100%;
			}
			.mui-backdrop:not(.mui-active) {
			    z-index: 998 !important;
			}
		</style>
	</head>
	
	<body>
		<header class="mui-bar mui-bar-nav hbg ">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
		    <h1 class="mui-title">卡项统计</h1>
		</header>
		<div class="mui-content">
			
		
		<main id="content">
			<div id="">
		    	<div class="mui-input-row borbot" >
					<label>门店:</label>
		    		<div class="place items">
					    <button id='level' type="button" class="mui-btn mui-btn-blue mui-btn-outlined">门店选择</button>
					</div>
				</div> 
		    </div>
			<section class="financial-tab text-center">
				<ul class="mui-row">
					<li class="mui-col-xs-6 active"> 
						<p>会员卡统计</p>
					</li>
					<li class="mui-col-xs-6">
						<p>次卡统计</p>
					</li>
				</ul>
			</section>
			<!-- <section class="main-title container border"><img src="http://placehold.it/38x38" alt="" /><span>热门充次项目</span></section>
			<div id="analysis" style="height: 400px; width: 100%;"></div>
			
			<section class="main-title container border clear singleday">
				<img src="http://placehold.it/38x38" alt="" /><span>计次走势分析</span>
			</section>
			
			<div id="trend" class="singleday" style="height: 300px"></div> -->
			<!-- <h3>会员卡统计</h3> -->
			<section class="sw">
				<div class="si">
					<div class="salce-tab container">
						<ul class="mui-row">
							<li class="mui-col-xs-6 right"><span>总数量</span> <b class="cart3">0</b></li>
							<li class="mui-col-xs-6 right"><span>总余额</span> <b class="cart4">0</b></li>
						</ul>
					</div>
					<section class="container">
						<div class="table table1 text-center table-border profit-table table-col-4"></div>
					</section>
				</div>
				<div class="si" style="display: none;">
					<div class="salce-tab container">
					<ul class="mui-row">
						<li class="mui-col-xs-6 right"><span>总余次</span> <b class="cart1">0</b></li>
						<li class="mui-col-xs-6 right"><span>总金额</span> <b class="cart2">0</b></li>
					</ul>
					</div>
					<section class="container">
						<div class="table table2 text-center table-border profit-table table-col-5"></div>
					</section>
				</di>
			</section>
			
			<!-- <h3>次卡统计</h3> -->
			
			<!-- <div id="popover" class="mui-popover">
				<div class="listdiv">
					<div class="mui-input-row borbot" >
						<label>开始时间:</label>
						<div class="place items">
							<button id='starttime' data-time="" onclick="changTime(event)" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">开始时间</button>
						</div>
					</div> 
					<div class="mui-input-row borbot" >
						<label>结束时间:</label>
						<div class="place items">
							<button id='endtime' data-time="" onclick="changTime(event)" type="button" class="mui-btn mui-btn-blue mui-btn-outlined">结束时间</button>
						</div>
					</div>
					<button type="button" id="okbut" class="mui-btn mui-btn-blue mui-btn-block">确定</button>
				</div>
			</div> -->
		</main>
		</div>
	</body>
	<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.min.js"></script>
	<script src="../js/mui.picker.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/echarts.js"></script>
	<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
	<!--<script src="../js/city.data.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/city.data-3.js" type="text/javascript" charset="utf-8"></script>-->
	<script src="js/commont.js"></script>
	<script type="text/javascript">
		var store_id = 0;
		$('.mui-row').tab({
			curClass : 'active',
			children : 'li',
			callback : function (_sub, _index){
				$('.sw').children().eq(_index).show().siblings().hide()
			}
		})
		
		
		
		
		
		
		
		window.onload = function(){
			store();
			get_balance_census();
		}
		
		function get_balance_census(){
			ajax({
				url : '/api/member/balance_census',
				data : {
					access_token : acctoken(),
					store_id:store_id,
				}
			}, function (res){
				var data = res.data
			
				//var result = concat(data['product_trend'], data['use_member_card'], 'time')
				
				var html1 = ['<div class="table-th"><span class="table-td">卡类</span><span class="table-td">数量</span><span class="table-td">卡余额</span><span class="table-td">占比</span></div>']
				var html2 = ['<div class="table-th"><span class="table-td">项目</span><span class="table-td">余次</span><span class="table-td">持有人数</span><span class="table-td">金额</span><span class="table-td">占比</span></div>']
				//console.log(result)
				if(data.member_arr.length > 0){
					data.member_arr.forEach(function (cur, index, array){
						let name = '';
						if(cur.member_level){
							name = cur.member_level.member_level
						}else{
							name = '未分配'
						}
						
						var tpl =
							`<div class="table-tr"><span class="table-td">${name}</span><span class="table-td">${cur['level_count'] || 0}</span><span class="table-td">${cur['level_money'] || 0}</span><span class="table-td">${parseInt((cur['level_money']/data['total_level_money']).toFixed(2) * 100)}%</span></div>`;
						html1.push(tpl)
					})
				}
				
				if(data.card_arr.length > 0){
					data.card_arr.forEach(function (cur, index, array){
						let name = '';
						if(cur.product){
							name = cur.product.product_name
						}else{
							name = cur.card_name
						}
						
						var tpl =
							`<div class="table-tr"><span class="table-td">${name}</span><span class="table-td">${cur['member_count'] || 0}</span><span class="table-td">${cur['all_surplus_count'] || 0}</span><span class="table-td">${cur['all_card_money'] || 0}</span><span class="table-td">${parseInt((cur['all_card_money']/data['total_card_money']).toFixed(2) * 100)}%</span></div>`;
						html2.push(tpl)
					})
				}
				
				$('.cart1').html(data.total_surplus_count)
				$('.cart2').html(data.total_card_money)
				$('.cart3').html(data.total_level_count)
				$('.cart4').html(data.total_level_money)
				
				$('.table2').html(html2.join(''));
				$('.table1').html(html1.join(''));
				
				
			})
		}
		
		//获取门店列表
			function store(){
				var data = {
					url:"/api/store/lst",
					data:{
						access_token:acctoken(),
					}
				}
				ajax(data,function(res){
					console.log("门店列表",res)
					setpop(res.data)
				})
			}
			function setpop(list){
				var list1 = [];
				for(var i = 0; i < list.length; i++){
							var str = {value:list[i].id,text:list[i].store_name}
							list1.push(str);
				}
				var levelPicker = new mui.PopPicker();
                levelPicker.setData(list1);
                var level = document.getElementById('level');
                level.addEventListener('tap', function(event) {
                    levelPicker.show(function(items) {
                        level.innerText = items[0].text;
                        store_id = items[0].value;
                        get_balance_census();
                    });
                }, false);
			}
	</script>
</html>
